<template>
  <a-form
    :rules="treeRules"
    :model="treeFormConfig.form"
    @finish="submit"
    :label-col="{ span: 6 }"
    :wrapper-col="{ offset: 1 }"
    label-align="right"
    ref="treeFormRef"
    :disabled="hasPerm('ax:tree:edit')"
  >
    <FormCard title="编辑/新增" :back="back" subtitle="系统树模版">
      <template #extra>
        <a-button htmlType="submit" type="primary" :loading="treeTable.loading" block>
          保存
        </a-button>
      </template>
      <a-row :gutter="8">
        <a-col :span="16">
          <a-card>
            <a-form-item label="标签" name="label">
              <a-input
                allow-clear
                placeholder="请输入标题"
                v-model:value="treeFormConfig.form.label"
              ></a-input>
            </a-form-item>
            <a-form-item label="父级ID" name="parentId">
              <a-tree-select
                :tree-data="treeData"
                allow-clear
                :field-names="{ value: 'id', label: 'label' }"
                laceholder="请输入父级ID"
                v-model:value="treeFormConfig.form.parentId"
              ></a-tree-select>
            </a-form-item>
            <a-form-item label="Key" name="val">
              <a-input
                allow-clear
                placeholder="请输入Key"
                v-model:value="treeFormConfig.form.val"
              ></a-input>
            </a-form-item>
            <a-form-item label="类型" name="type">
              <a-input
                allow-clear
                placeholder="请输入类型"
                v-model:value="treeFormConfig.form.type"
              ></a-input>
            </a-form-item>
            <a-form-item label="标题" name="title">
              <a-input
                allow-clear
                placeholder="请输入标题"
                v-model:value="treeFormConfig.form.title"
              ></a-input>
            </a-form-item>
            <a-form-item label="图标" name="icon">
              <a-input
                allow-clear
                placeholder="请输入图标"
                v-model:value="treeFormConfig.form.icon"
              ></a-input>
            </a-form-item>
            <a-form-item label="是否为子节点" name="isLeaf">
              <a-input
                allow-clear
                placeholder="请输入是否为子节点"
                v-model:value="treeFormConfig.form.isLeaf"
              ></a-input>
            </a-form-item>
            <a-form-item label="节点样式" name="style">
              <a-input
                allow-clear
                placeholder="请输入节点样式"
                v-model:value="treeFormConfig.form.style"
              ></a-input>
            </a-form-item>
            <a-form-item label="禁用" name="disable">
              <a-input
                allow-clear
                placeholder="请输入禁用"
                v-model:value="treeFormConfig.form.disable"
              ></a-input>
            </a-form-item>
            <a-form-item label="禁用选择" name="disableCheckbox">
              <a-input
                allow-clear
                placeholder="请输入禁用选择"
                v-model:value="treeFormConfig.form.disableCheckbox"
              ></a-input>
            </a-form-item>
            <a-form-item label="样式" name="klass">
              <a-input
                allow-clear
                placeholder="请输入样式"
                v-model:value="treeFormConfig.form.klass"
              ></a-input>
            </a-form-item>
            <a-form-item label="附加数据" name="extra">
              <a-input
                allow-clear
                placeholder="请输入附加数据"
                v-model:value="treeFormConfig.form.extra"
              ></a-input>
            </a-form-item>
          </a-card>
        </a-col>
        <AxExtra></AxExtra>
      </a-row>
    </FormCard>
  </a-form>
</template>

<script setup lang="ts">
import {} from '../data/options';
import { hasPerm } from '@/utils/common/perm';
import type { Response } from '@/api/config/types';
import { createTree, updateTree } from '@/api/modules/ax/tree/tree';
import { notify } from '@/utils/table/table';
import { treeList } from '../data/curd';
import { treeFormConfig, treeRules, treeFormRef } from '../data/form';
import { treeTable } from '../data/table';
import AxExtra from './AxExtra.vue';
const treeData = ref<any>([]);
onMounted(() => {
  treeData.value = treeTable.value.data;
});
const submit = async () => {
  treeTable.value.loading = true;
  let result: undefined | Response<any> = undefined;
  if (treeFormConfig.value.form.id) {
    const { data } = await updateTree(treeFormConfig.value.form);
    result = data;
  } else {
    const { data } = await createTree(treeFormConfig.value.form);
    result = data;
  }
  notify(result);
  treeTable.value.loading = false;
  await treeList();
  back();
};

const back = () => {
  treeFormConfig.value.display = false;
  treeFormConfig.value.reset();
  treeFormRef.value?.resetFields();
};
</script>

<style lang="scss" scoped></style>
